<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script th:src="@{/static/main.js}"></script>

</head>
<body>
<!--颜醉-->
<!--用户端app主页-->



<div class="container-fluid" id="app" style="margin-top: 10px;margin-bottom: 100px">

    <div class="container" style="margin-top: 10px">

        <div class="row">
            <div class="col-md-12">
                <p style="background-color: cornflowerblue ; color: white; font-size: 30px; padding-left: 10px; border-radius: 4px">
                    <a th:href="@{/usercenter.html}" style="font-size: 30px;color: white;text-decoration: none">个人中心</a>
                </p>

            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="thumbnail" style="box-shadow: 5px 5px 3px 0px #CCCCCC">
                    <img v-if="currentUser.userImg" :src="currentUser.userImg" alt="..." class="col-sm-2 col-md-2 img-circle">
                    <img v-if="!currentUser.userImg" src="/static/109951166155909486.jpg" alt="..." class="col-sm-2 col-md-2 img-circle">
                    <div class="caption text-left">
                        <div>
                            <p class="text-muted" style="font-size: 30px;font-weight: bold"><span v-text="currentUser.username">username</span></p>
<!--                            <p class="text-muted" style="font-size: 18px">积分余额:<span v-text="currentUser.userPoints">userPoints</span></p>-->
<!--                            <p>-->
<!--                                <a href="whatpoints.html" style="position: relative;z-index: 500;font-size: 18px">关于积分?</a> &nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                            </p>-->

                        </div>
                        <div style="padding-left: 700px;position: relative;bottom: 50px;">
                            <p>
                                <a class="btn btn-primary" href="usersetting.html">账号设置</a> &nbsp;&nbsp;&nbsp;&nbsp;
                            </p>
                            <p>
                                <a class="btn btn-primary" href="userorder.html">我的订单</a> &nbsp;&nbsp;&nbsp;&nbsp;
                            </p>
                            <p>
                                <a class="btn btn-primary" href="useraddress.html">我的地址</a> &nbsp;&nbsp;&nbsp;&nbsp;
                            </p>
                        </div>

                    </div>
                </div>
            </div>
        </div>


    </div>


</div>


<script>

    console.log(".........usercenter...........")

    let usercenter = new Vue({
        el: "#app"
        ,
        data: {
            currentUser: ''

        }
        ,
        methods: {
            initCurrentUser() {
                let _this=this;
                $.get("/user/currentUser",function (data) {
                    _this.currentUser=data;
                })
            }

        }
        ,
        created() {
            this.initCurrentUser();
        }

    });


</script>

</body>
</html>

